<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>子元素选择器</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			#div1>p{background-color:red;}/*所有div的子代p*/


		</style>
	</head>
	<body>
		<h1>子元素选择器 E>F</h1>
		<p>父元素的所有子元素,但不包含孙代!父元素的兄弟元素!</p>
		<h2>总结:</h2>	
		<p>1.选择的父元素有多个div,所有的div都会被选中  div下的p元素生效  p标签的文字生效,子代除了div下的p外其他兄弟元素不生效</p>
		<p>2.父元素div下p子代才有效,p的其他兄弟元素无效div的所有兄弟无效</p>
		<p>3.div里所有p子代选中</p>
		<hr>
		<p>
			<div id="div1">
				<div class="div2">
					<p>div下的div的子代span变色</p>
					<p>
						p
						<div class="div2">div
							<p>p</p>
						</div>
					</p>
					<div>
						<p>p</p>
					</div>
				</div>
				<div>
					<p>div下的div的子代span变色</p>
				</div>
				<p>div里p变色</p>
				<p>
					<div>div</div>
					<span>p里的子代span也变色
						<p>ass</p>
					</span>
					<div>div</div>
					<span>
						<p>span里的p</p>
					</span>
				</p>
				<div class="div2">
					<p>div下的div的子代span变色</p>
				</div>
				<p>div里p变色</p>
				<a href=""><p>p的兄弟无效</p></a>
				<p>div里p变色</p>
				<div>
					<p>div下的div的子代span变色</p>
				</div>
			</div>
			<p>div的兄弟p无效</p>
		</p>
		<div>
			<p>p</p>
			<span>span</span>
			<p>p</p>
			<p>p</p>
			<p>p</p>
		</div>
		<script src="../js/jquery-1.12.2.min.js""></script>
		<script src="../js/dom.js"></script>
		<script type="text/javascript">
			


		</script>	
		
		
	</body>
</html>
